<template>
  <div>
    <BasicTable @register="registerTable" @fetch-success="fetchSuccess">
      <template #toolbar>
        <a-button type="primary" @click="handleOpen({})"><PlusOutlined /></a-button>
        <excel-import :bean="bean" :title="name" :columns="tableColumns" />
        <excel-export :bean="bean" :pri-key="priKey" :total="resTotal" :params="reqParams" :columns="tableColumns" :file-name="name" />
      </template><!-- toolbar -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button v-if="record.status === 2" :loading="reqLoading" type="default" @click="handleStatus(record, 1, '隐藏')"><EyeInvisibleOutlined /></a-button>
          <a-button v-if="record.status === 1" :loading="reqLoading" type="success" @click="handleStatus(record, 2, '显示')"><EyeOutlined /></a-button>
          <a-button @click="handleOpen(record, true)"><InfoCircleOutlined /></a-button>
          <a-button type="primary" @click="handleOpen(record)"><EditOutlined /></a-button>
          <a-popconfirm title="是否删除" @confirm="handleStatus(record, 0, '删除')">
            <a-button :loading="reqLoading" type="danger"><DeleteOutlined /></a-button>
          </a-popconfirm>
        </template>
      </template><!-- bodyCell -->
      <template #expandedRowRender="{ record }">
      </template><!-- expandedRowRender -->
    </BasicTable>
    <DetailModal :title="name" :cascades="innerSchemas" @register="registerDetail" />
    <SaveModal ref="saveModalRef" :title="name" :prikey="priKey" :schemas="formSchema" :cascades="innerSchemas" :label-width="80" @register="registerModal" @success="handleSuccess" />
    <!-- <SaveTable ref="saveModalRef" :title="name" :prikey="priKey" :columns="editColumns" :label-width="80" @register="registerModal" @success="handleSuccess" /> -->
  </div>
</template>
<script lang="ts">
  import { deepMerge } from '/@/utils'
  import { Tag } from 'ant-design-vue'
  import { defineComponent, reactive, ref, h } from 'vue'
  import { BasicTable, useTable } from '/@/components/Table'
  import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
  import { EditOutlined, DeleteOutlined, PlusOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
  import { useCrudSchemas, CrudSchema, CascadeSchema } from '/@/hooks/web/useCrudSchemas'
  import { pageBy, offsetBy, saveOne, uploadApi, ApiParams } from '/@/api/service'
  import { useMessage } from '/@/hooks/web/useMessage'
  import { useModal } from '/@/components/Modal'
  import SaveModal from '/@/views/comp/SaveModal.vue'
  import SaveTable from '/@/views/comp/SaveTable.vue'
  import DetailModal from '/@/views/comp/DetailModal.vue'
  import ExcelExport from '/@/views/comp/ExcelExport.vue'
  import ExcelImport from '/@/views/comp/ExcelImport.vue'

  const name: string = '用户'
  const bean: string = 'hdb.hdbUser'
  const priKey: string = 'id'
  const apiParams: ApiParams = { showFlags: 'roleList[name]', params: {}}

  const innerSchemas = reactive<CascadeSchema[]>([
  ]) // innerSchemas
  const crudSchemas = reactive<CrudSchema[]>([
  ]) // crudSchemas
  const { formSchema, searchSchema, tableColumns, editColumns } = useCrudSchemas(crudSchemas)
  const { createMessage } = useMessage()

  export default defineComponent({
    name: 'HdbUser',
    components: { BasicTable, ExcelExport, ExcelImport, SaveModal, SaveTable, DetailModal, InfoCircleOutlined, PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, EyeInvisibleOutlined },
    setup() {
      const resTotal = ref<number>(0)
      const reqParams = ref<Object>({})
      const reqLoading = ref<boolean>(false)

      const [registerModal, { openModal }] = useModal();
      const [registerDetail, { openModal: openDetail }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: async (params) => {
          reqParams.value = deepMerge(apiParams, params)
          return await pageBy(bean, reqParams.value)
        },
        title: name + '列表',
        rowKey: priKey,
        columns: tableColumns,
        formConfig: {
          labelWidth: 80,
          schemas: searchSchema,
          autoSubmitOnEnter: true,
        },
        // 行选择框
        // rowSelection: {
        //   type: 'checkbox', // radio
        // },
        // 树形表格
        // isTreeTable: true,
        // pagination: false,
        // striped: false,

        bordered: true,
        canResize: false,
        useSearchForm: true,
        showIndexColumn: false,
        showTableSetting: true,
        handleSearchInfoFn(params) {
          reqParams.value = deepMerge(apiParams, params)
          return params
        },
        actionColumn: {
          width: 225,
          title: '操作',
          fixed: 'right',
          dataIndex: 'action'
        }
      })

      function fetchSuccess({ total }) {
        resTotal.value = total
        // 展开所有表项
        // nextTick(expandAll);
      }

      function handleOpen(record: Recordable, detail: boolean = false) {
        if (detail) { openDetail(true, { record }); return }
        openModal(true, {})
        if (record && record[priKey]) {
          setTimeout(() => openModal(true, { record }), 300)
        }
      }

      const saveModalRef = ref()
      async function handleStatus(record: Recordable, status, name: string = '处理') {
        try {
          reqLoading.value = true
          await saveOne(bean, { id: record.id, status })
          createMessage.success(name + '成功')
          reqLoading.value = false
          reload()
        } catch (e) {}
      }

      async function handleSuccess({ isUpdate, values }) {
        try {
          await saveOne(bean, values)
          createMessage.success(isUpdate ? '编辑成功' : '创建成功')
          saveModalRef?.value?.close()
          reload()
        } catch (e) {
          saveModalRef?.value?.cancel()
        }
      }

      return {
        bean,
        name,
        priKey,
        resTotal,
        reqParams,
        registerTable,
        registerModal,
        registerDetail,
        handleOpen,
        handleStatus,
        handleSuccess,
        fetchSuccess,
        formSchema,
        editColumns,
        innerSchemas,
        tableColumns,
        reqLoading,
        saveModalRef
      }
    }
  })
</script>
